<style scoped>
.panel-shadow-outset {
  /* display: inline-block; */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.panel-shadow-outset:hover,
.panel-shadow-outset:focus,
.panel-shadow-outset:active {
  box-shadow: 1px 2px 2px #dddee1;
  background: #eaf4fe;
  border: 1px solid #2d8cf0;
}
.card-panel {
  border: 1px solid #dddee1;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  padding: 5px;
  margin: 5px;
  background: #fff;
  z-index: 2;
  /* width:330px; */
  /* height:200px; */
}
</style>

<template>
  <div class="hello">
    <Row :gutter="12">
        <Col span="6">
            <Form :model="vehicleInfo" label-position="right" :label-width="64">
                <FormItem label="车牌号">
                    <Input v-model="vehicleInfo.vehicleNumber" style="width: 100%"></Input>
                </FormItem>
                <FormItem label="通车时段">
                    <DatePicker v-model="vehicleInfo.time" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="请选择通车时段" style="width: 100%"></DatePicker>
                </FormItem>
            </Form>

            <Button type="primary" @click="search" long >查询</Button>

            <div v-for="item in page.data" v-bind:key="item.id" @click="run(item)" class="card-panel panel-shadow-outset">
              <p>{{item.info.routeLabel}}</p>
              <p>{{item.info.timeLabel}}</p>
              <p>{{item.info.times}}小时 | {{item.info.distance}}公里 | -- km/h</p>
            </div>

            <!-- <Page :total="40" size="small" show-total show-sizer style="text-align:right"></Page> -->
            <Page :current="1" :total="page.total" :page-size="5" simple show-total show-sizer style="text-align:right"></Page>

        </Col>
        <Col span="18" >
            <routeMapView ref="routeMapView"/>
            <!-- <MapView :m="giveData"></MapView> -->
        </Col>
    </Row>
  </div>
</template>

<script>
import RouteMapView from "../components/RouteMapView.vue";

import axios from "axios";
import VueAxios from "vue-axios";

export default {
  name: "VechileRoute",
  data() {
    return {
      vehicleInfo: {
        vehicleNumber: "陕K8D880"
      },
      giveData: {
        height: 300,
        longitude: 116.404,
        latitude: 39.915
      },
      giveOutData: {
        height: 400,
        longitude: 116.417854,
        latitude: 39.921988
      },
      page: {},
      points: {},
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    routeMapView: RouteMapView
  },
  methods: {
    search() {
      //this.loading = true;
      //alert("12232321321");
    }    ,
    run(item) {

      //var points = [];
      var data = item.stations;
      //for (var i = 0; i < data.length; i++) {
      //  var point = new BMap.Point(data[i].latitude,data[i].longitude);
      //  points.push(point)
      //}
      //this.points = points
      this.$refs.routeMapView.getRoutes(data)
      
    }
  },
  created: function() {
    axios.get("/api/traffics").then(response => {
      var data = response.data;
      var page = {};
      page.total = data.total;
      page.data = data.data.slice(0, 5);
      this.page = page;
    });
  }

};
</script>
